@import "../../common/less/theme";

.seckill{
  .s-content{
    position: relative;
    width: 100%;
    background-color: rgb(244, 244, 244);
    .c-backgrund{
      position: absolute;
      width: 100%;
      height: 1000rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .c-wrapper{
      position: absolute;
      width: 100%;
      .w-half{
        width: 100%;
        margin-bottom: 27.5rpx;
        .h-header{
          display: flex;
          align-items: center;
          padding: 42rpx 0 24rpx 24rpx;
          image{
            width: 128rpx;
            height: 40rpx;
            margin-right: 10rpx;
          }
          span{
            color: #fff;
            font-size: 26rpx;
          }
        }
        .h-goods{
          margin-left: 24rpx;
          width: 100%;
          .g-scrollview{
            width: 100%;
            .s-wrapper{
              display: flex;
              .w-item{
                width: 258rpx;
                height: 396rpx;
                background: #fff;
                position: relative;
                margin-right: 12rpx;
                border-radius: 18rpx;
                .i-top{
                  position: relative;
                  .t-time{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 172rpx;
                    height: 34rpx;
                    background-color: rgb(3, 158, 130);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-bottom-right-radius: 12rpx;
                    text{
                      color: #fff;
                    }
                  }
                  .t-image{
                    image{
                      width: 258rpx;
                      height: 258rpx;
                    }
                  }
                  .t-status{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 258rpx;
                    height: 32rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: rgb(200, 255, 245);
                  }
                }
                .i-bottom{
                  position: relative;
                  display: flex;
                  flex-direction: column;
                  .b-title{
                    width: 234rpx;
                    height: 36rpx;
                    margin-top: 12rpx;
                    margin-left: 12rpx;
                    display: flex;
                    align-items: center;
                    text{
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      font-size: 26rpx;
                    }
                  }
                  .b-info{
                    position: relative;
                    width: 234rpx;
                    height: 54rpx;
                    margin-top: 16rpx;
                    margin-left: 12rpx;
                    image{
                      width: 234rpx;
                      height: 54rpx;
                    }
                    .b-left{
                      position: absolute;
                      left: 17rpx;
                      top: 0;
                      display: flex;
                      flex-direction: column;
                      .l-discount{
                        color:  rgb(242, 29, 29);
                        line-height: 26rpx;
                        font-size: 26rpx;
                      }
                      .l-original{
                        text-decoration: line-through;
                        color: rgb(119, 119, 119);
                        line-height: 26rpx;
                        font-size: 26rpx;
                      }
                    }
                    .b-right{
                      position: absolute;
                      right: 14rpx;
                      top: 0;
                      .r-status{
                        display: flex;
                        flex-direction: column;
                        text{
                          width: 68rpx;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          line-height: 26rpx;
                          font-size: 22rpx;
                          color: rgb(255, 255, 255);
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .w-timeInterval{
        display: flex;
        .t-left{
          display: flex;
          padding-left: 24rpx;
          width: 257rpx;
          .l-logo{
            width: 72rpx;
            height: 80rpx;
            padding-top: 12rpx;
            text-align: center;
            text{
              font-size: 36rpx;
              line-height: 36rpx;
              color: #fff;
            }
          }
          .l-buying{
            margin-left: 37rpx;
            display: flex;
            flex-direction: column;
            .b-time{
              height: 56rpx;
              text-align: center;
              font-size: 36rpx;
              color: #fff;
              line-height: 62rpx;
              font-weight: bold;
            }
            .b-text{
              height: 34rpx;
              line-height: 34rpx;
              padding: 0 16rpx;
              font-size: 22rpx;
              text-align: center;
              border-radius: 17rpx;
              background-color: #fff;
              color: rgb(255, 48, 72);
            }
          }
        }
        .t-right{
          width: 493rpx;
          .r-wrapper{
            width: 645.5rpx;
            display: flex;
            .w-item{
              display: flex;
              flex-direction: column;
              width: 124rpx;
              height: 94rpx;
              text-align: center;
              .i-time{
                font-size: 36rpx;
                height: 56rpx;
                line-height: 62rpx;
                color: rgba(255, 255, 255, .6);
              }
              .i-text{
                height: 34rpx;
                line-height: 34rpx;
                font-size: 22rpx;
                color: rgba(255, 255, 255, .6);
              }
            }
          }
        }
      }
      .w-hotgrabList{
        width: 100%;
        .h-wrapper{
          width: 100%;
          .w-image{
            width: 100%;
            margin-top: 18rpx;
            margin-bottom: 24rpx;
            image{
              width: 100%;
              height: 146rpx;
            }
          }
          .w-item{
            position: relative;
            width: 702rpx;
            height: 264rpx;
            margin-left: 24rpx;
            margin-right: 18rpx;
            background-color: #fff;
            border-radius: 20rpx;
            display: flex;
            .i-left{
              position: relative;
              padding: 0 18rpx;
              display: flex;
              align-items: center;
              .l-image{
                width: 228rpx;
                height: 228rpx;
                border-radius: 10rpx;
              }
              .l-label{
                position: absolute;
                top: 18rpx;
                left: 18rpx;
                width: 80rpx;
                height: 40rpx;
                image{
                  width: 80rpx;
                  height: 40rpx;
                }
              }
            }
            .i-right{
              position: relative;
              width: 430rpx;
              padding-top: 24rpx;
              .r-title{
                line-height: 35rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                text{
                  font-size: 30rpx;
                  color: #000;
                }
              }
              .r-desc{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 35rpx;
                line-height: 35rpx;
                margin-top: 6rpx;
                text{
                  font-size: 26rpx;
                  color: rgb(119, 119, 119);
                }
              }
              .r-progress{
                position: relative;
                margin-top: 14rpx;
                width: 180rpx;
                height: 28rpx;
                border-radius: 16rpx;
                background-color: rgb(255, 214, 199);
                display: flex;
                align-items: center;
                text{
                  font-size: 22rpx;
                  margin-left: 10rpx;
                  color: rgb(191, 17, 17);
                }
              }
              .r-shopping{
                width: 430rpx;
                height: 108rpx;
                position: absolute;
                bottom: 0;
                display: flex;
                .s-lower{
                  position: absolute;
                  top: 0;
                  left: 0;
                  text{
                    font-size: 24rpx;
                    color: rgb(241, 29, 29);
                  }
                }
                .s-price{
                  position: relative;
                  margin-top: 32rpx;
                  .p-yuan{
                    height: 34rpx;
                    line-height: 40rpx;
                    font-size: 24rpx;
                    margin-top: 13rpx;
                    color: rgb(242, 29, 29);
                  }
                  .p-lowerPrice{
                    height: 56rpx;
                    line-height: 56rpx;
                    font-size: 40rpx;
                    color: rgb(242, 29, 29);
                  }
                  .p-text{
                    margin-top: 12rpx;
                    line-height: 40rpx;
                    font-size: 24rpx;
                    color: rgb(242, 29, 29);
                  }
                  .p-originalPrice{
                    margin-top: 12rpx;
                    margin-left: 8rpx;
                    line-height: 40rpx;
                    font-size: 24rpx;
                    text-decoration: line-through;
                    color: rgb(136, 136, 136);
                  }
                }
                .s-button{
                  position: absolute;
                  right: 0;
                  width: 166rpx;
                  height: 108rpx;
                  display: flex;
                  align-items: center;
                  text{
                    width: 148rpx;
                    height: 54rpx;
                    line-height: 54rpx;
                    border-radius: 27rpx;
                    background-color: rgb(255, 49, 67);
                    color: rgb(255, 255, 255);
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}